<!-- Created by henian.xu on 2018/11/11. -->

<template>
    <Page class="container">
        <Panel label="审核进度查询">
            <div class="row">
                <div class="col-5">&nbsp;</div>
                <div
                    class="col-14"
                    style="min-height: 400px;">
                    <div class="query-box">
                        <div
                            class="btn"
                            @click="onQuery">查询</div>
                        <div class="query-input query-code">
                            <input
                                type="text"
                                placeholder="请输入查询码"
                                v-model="formModel.queryCode">
                        </div>
                        <div class="query-input">
                            <input
                                type="text"
                                placeholder="请输入账号邮箱或者手机"
                                v-model="formModel.account">
                        </div>
                    </div>
                    <div
                        class="query-status"
                        v-if="authInfo.id">
                        <div class="label">申请入驻: {{ userTypeName }} <template v-if="authInfo.authTypeName">({{ authInfo.authTypeName }})</template></div>
                        <div class="body">
                            <div class="icon-wrap">
                                <i class="f-icon">&#xf002;</i>
                                <div class="label">{{ authInfo.authStatusName }}</div>
                                <div class="desc">
                                    <template v-if="authStatus===10">请耐心等待审核结果</template>
                                    <template v-if="authStatus===20">您递交的申请已受理，请保持手机通话通畅</template>
                                    <template v-if="authStatus===30">请详细阅读审核不通过原因，并修改入驻资料再次提交</template>
                                    <template v-if="authStatus===100">您的入驻申请已经通过，登录账号与密码已发送到您的邮箱和手机，请留意查收！</template>
                                </div>
                            </div>
                            <div class="info">
                                <span>账号邮箱：{{ authInfo.accountEmail }}</span>
                                <span>提交时间：{{ authInfo.insertTime | moment }}</span>
                            </div>
                        </div>
                    </div>
                    <template
                        v-if="authStatus===30">
                        <div class="audit-failure">
                            <div class="label">审核不用过原因</div>
                            <div class="desc">{{ auditLog.auditRemark }}</div>
                        </div>
                        <div
                            class="ta-c"
                            style="margin-top: 20px;">
                            <linker
                                to="/"
                                ssr
                                class="btn btn-big btn-main">返回首页</linker>
                            <linker
                                :to="`/register/${userType===2?'supplier':'distributor'}?queryCode=${formModel.queryCode}&account=${formModel.account}`"
                                ssr
                                class="btn btn-big btn-main">立即修改</linker>
                        </div>
                    </template>
                    <template v-if="authStatus===100">
                        <div
                            class="ta-c"
                            style="margin-top: 20px;">
                            <linker
                                to="/"
                                ssr
                                class="btn btn-big btn-main">返回首页</linker>
                            <linker
                                :to="userType===2?buyerUrl:shopUrl"
                                ssr
                                class="btn btn-big btn-main">立即登录</linker>
                        </div>
                    </template>
                </div>
                <div class="col-5">&nbsp;</div>
            </div>
        </Panel>
    </Page>
</template>

<script>
/**
 * authStatus
 * 10:  待受理
 * 20:  待审核
 * 30:  审核不通过
 * 100: 审核通过
 */
export default {
    data() {
        return {
            formModel: {
                // queryCode: 'HR6KK', //GQE92
                // account: '18060082532', //18060082531
                queryCode: '',
                account: '',
            },
            auditLog: {},
            authInfo: {},
            userType: {},
            buyerUrl: '',
            shopUrl: '',
        };
    },
    head() {
        return {
            title: '审核进度查询',
        };
    },
    computed: {
        authStatus() {
            return this.authInfo.authStatus || 0;
        },
        userTypeName() {
            switch (this.userType) {
                case 1:
                    return '分销商入驻';
                case 2:
                    return '供应商入驻';
            }
            return '未知';
        },
    },
    methods: {
        validate() {
            const { queryCode, account } = this.formModel;
            if (!queryCode) {
                this.$messageBox.alert('请输入查询码');
                return false;
            }
            if (!account) {
                this.$messageBox.alert('请输入账号邮箱或者手机');
                return false;
            }
            return true;
        },
        getAuthInfoDetail() {
            if (!this.validate()) return;
            this.$axios.get('/rpc/buyer/mb/buyerAuthInfo/getAuthInfoDetail', this.formModel).then(json => {
                const result = json.data.data;
                this.auditLog = result.auditLog;
                this.authInfo = result.authInfo;
                this.userType = result.type;
                this.buyerUrl = result.buyerUrl;
                this.shopUrl = result.shopUrl;
            });
        },
        onQuery() {
            this.getAuthInfoDetail();
        },
    },
};
</script>

<style lang="scss" scoped>
@import '~/assets/style/_index.scss';
.query-box {
    @include clearfix;
    > .query-input {
        overflow: hidden;
        > input {
            width: 100%;
            line-height: 40px;
            border: 1px solid $color-border;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-right: 0;
            outline: none;
            padding: 0 $padding;
        }

        &.query-code {
            float: left;
            margin-right: $margin;
            > input {
                border-radius: 5px;
                border: 1px solid $color-border;
            }
        }
    }
    > .btn {
        float: right;
        line-height: 40px;
        padding: 0 $padding-big;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-color: $color-main;
        background-color: $color-main;
        color: #fff;
    }
}

.query-status {
    margin-top: 20px;
    > .label {
        font-size: 18px;
        font-weight: bold;
    }
    > .body {
        text-align: center;
        > .icon-wrap {
            margin-top: $margin-big;
            > .f-icon {
                font-size: 50px;
                color: $gray4;
            }
            > .label {
                font-size: 18px;
                font-weight: bold;
            }
        }
        > .info {
            margin-top: 20px;
            > span {
                margin: 0 $margin;
            }
        }
    }
}

.audit-failure {
    text-align: center;
    margin-top: $margin;
    .label {
        color: $color-main;
    }
}
</style>
